<template>
	<view>
		<view class="assets-top">
			<view class="assets-box">
				<view class="total-money">总金额(元)</view>
				<image src="https://z3.ax1x.com/2021/04/22/cOi36K.png" mode="" class="onebox-image" @tap="licai"></image>
			</view>
			<view class="assets-box">
				<text class="middle-number">{{sumOverAllBalance || '0.00'}}</text>
			</view>
			<view class="assets-box">
				<view>
					<text class="Cumulative-text">今日收益</text>
					<text class="Cumulative-money">{{todaySumEarnings || '0.00'}}</text>
				</view>
				<view>
					<text class="Cumulative-text">累计收益</text>
					<text class="Cumulative-money">{{sumEarnings || '0.00'}}</text>
				</view>
			</view>
			
			<view class="assets-bottom-box">
				
				<view class="fund">
					<navigator url="/pages/personal/my-assets/CurrentAssets/CurrentAssets" class="fund-item">
						<text class="fund-titel">活期</text><br>
						<text class="fund-text">灵活取存</text>
					</navigator>
					<navigator url="/pages/personal/my-assets/FundAssets/FundAssets" class="fund-item">
						<text class="fund-titel">基金</text><br>
						<text class="fund-text">浮动收益</text>
					</navigator>
				</view>
				
				<view class="fund-middle"></view>
				
				<view class="fund">
					<navigator url="/pages/personal/my-assets/TermAssets/TermAssets" class="fund-item">
						<text class="fund-titel">定期</text><br>
						<text class="fund-text">稳健收益</text>
					</navigator>
					<navigator url="/pages/personal/my-assets/GoldAssets/GoldAssets" class="fund-item">
						<text class="fund-titel">黄金</text><br>
						<text class="fund-text">多元投资</text>
					</navigator>
				</view>
			</view>
		</view>
		
		<view class="assets-middle-banner">
			<image src="https://z3.ax1x.com/2021/04/22/cOiJmD.png" mode="" class="banner-image"></image>
		</view>
		
		<view class="Boutique">
			<text>— 人气精品 —</text> 
		</view>
		
		
		<view class="assets-bottom">
			
			<view class="bottom-item">
				<view class="item-textone">国华节节高A款</view>
				<view class="texttwo-item">
					<text class="texttwo-number">5.91</text>
					<text class="texttwo">%</text>
				</view>
				<view class="item-textthree">历史年化投资回报率</view>
			</view>
			
			<view class="bottom-item">
				<view class="item-textone">宏康小金罐</view>
				<view class="texttwo-item">
					<text class="texttwo-number">3.94</text>
					<text class="texttwo">%</text>
				</view>
				<view class="item-textthree">灵活资金近30天年化投...</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import{createNamespacedHelpers} from 'vuex'
	const {mapActions,mapState} = createNamespacedHelpers('UserInfor')
	export default {
		async onShow() {
			const data = await this.totalRevenueData(this.userData)
			console.log(data);
			this.todaySumEarnings = data.data.todaySumEarnings
			this.sumOverAllBalance=data.data.sumOverAllBalance
			this.sumEarnings = data.data.sumEarnings
		},
		data() {
			return {
				sumOverAllBalance:0,///总余额
				todaySumEarnings:0,///今日收益
				sumEarnings:0,///总收益
			}
		},
		computed:{
			...mapState(['userData'])
		},
		methods: {
			...mapActions(['totalRevenueData']),
			licai(){
				uni.navigateTo({
					url:'/pages/transactionRecords/transactionRecords'
				})
			}
		}
	}
</script>

<style>
	body{
		background-color: #F3F3F3;
	}
	.assets-top{
		width: 634rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 30rpx auto 40rpx;
		padding: 32rpx 42rpx 0rpx 40rpx;
	}
	.assets-box{
		width: 100%;
		height: 54rpx;
		/* border: 1px solid red; */
		display:  flex;
		flex-grow: 1;
		justify-content: space-between;
		line-height: 54rpx;
	}
	.onebox-image{
		width: 33rpx;
		height: 38rpx;
		/* border: 1px solid red; */
		margin-top: 10rpx;
	}
	.total-money{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	.middle-number{
		font-size: 40rpx;
		font-family: Lato;
		font-weight: bold;
		color: #333333;
	}
	.Cumulative-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-right: 20rpx;
	}
	.Cumulative-money{
		font-size: 28rpx;
		font-family: Lato;
		font-weight: 400;
		color: #333333;
	}
	
	.assets-bottom-box{
		width: 100%;
		height: 238rpx;
		/* border: 1px solid red; */
		margin-top: 65rpx;
		display: flex;
	}
	.fund{
		width: 46%;
		height: 100%;
		/* border: 1px solid red; */
	}
	.fund-middle{
		height: 206rpx;
		border: 1rpx solid rgb(0,0,0,0.04);
		margin-top: 15rpx;
		margin-right: 40rpx;
		margin-left: 40rpx;
	}
	.fund-item{
		width: 100%;
		height: 115rpx;
		line-height: 50rpx;
		/* border: 1px solid red; */
		margin-top: 15rpx;
	}
	.fund-titel{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.fund-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	
	.assets-middle-banner{
		width: 700rpx;
		height: 200rpx;
		margin: 0rpx auto;
		/* border: 1px solid red; */
	}
	.banner-image{
		width: 700rpx;
		height: 200rpx;
	}
	
	.Boutique{
		width: 700rpx;
		height: 50rpx;
		/* border: 1px solid red; */
		margin: 30rpx auto 18rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		text-align: center;
		color: #999999;
	}
	
	
	.assets-bottom{
		width: 700rpx;
		height: 198rpx;
		/* border: 1rpx solid red; */
		margin: 0rpx auto 340rpx;
		display: flex;
		justify-content: space-between;
	}
	.bottom-item{
		width: 338rpx;
		height: 198rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
	}
	.item-textone{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 20px;
		color: #333333;
		margin: 22rpx 0rpx 10rpx 30rpx;
	}
	
	.texttwo-item{
		font-weight: 400;
		font-family: Lato;
		color: #F85656;
		margin: 15rpx 0rpx 6rpx 30rpx;
	}
	.texttwo-number{
		font-size: 44rpx;
	}
	.texttwo{
		font-size: 28rpx;
	}
	
	.item-textthree{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 30rpx;
	}
</style>
